<template>
  <div class="charge_under_line">

    <!--搜索栏-->
    <div class="searchBox">
      <el-select v-model="value" placeholder="请选择项目类型">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-select v-model="value" placeholder="请选择收费项目" style="margin-left: 10px;">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-select v-model="value" placeholder="请选择机构" style="margin-left: 10px;">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-input
        placeholder="请输入用户名进行搜素"
        style="width: 220px;margin-left: 20px;">
      </el-input>
      <el-button type="primary" icon="el-icon-search" style="margin-left: 20px">搜索</el-button>
    </div>
    <!--线下收费按钮-->
    <el-row type="flex" class="table_btn">
      <el-col :span="24" class="btnTypeSet">
        <el-button type="danger">线下收费</el-button>
      </el-col>
    </el-row>

    <el-form :model="payTypeForm" :rules="rules" class="payTypeBox">
      <el-form-item prop="payType">
        <el-select v-model="payTypeForm.payType" placeholder="请选择支付方式">
          <el-option label="请选择支付方式" value=""></el-option>
          <el-option label="POS" value="POS"></el-option>
          <el-option label="现金" value="xianjin"></el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <el-table
      ref="multipleTable"
      size="mini"
      :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
      @row-click="handleRowHandle"
      style="width: 100%;cursor: pointer;"
      @selection-change="">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        label="缴费编号"
        align="center"
        width="160">
        <template slot-scope="scope">{{ scope.row.number }}</template>
      </el-table-column>
      <el-table-column
        label="姓名"
        align="center"
        width="160">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="应缴金额"
        align="center"
        width="160">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.shouldPay }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="实缴金额"
        align="center"
        width="160">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.payed }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="缴费状态"
        align="center"
        width="160">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.status }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="缴费项目"
        align="center"
        width="160">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.payItem }}</span>
        </template>
      </el-table-column>
    </el-table>

    <div class="footerBox">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :total="tableData.length">
      </el-pagination>
    </div>
  </div>
</template>

<script>

  export default {
    data() {
      return {
        currentPage: 1,
        pageSize: 10,
        tableData: [
          {
            number : "编号1",
            name : "测试1",
            shouldPay : 100,
            payed : 0,
            status : "待缴费",
            payItem : "10月份住宿费"
          },
          {
            number : "编号2",
            name : "测试2",
            shouldPay : 100,
            payed : 0,
            status : "待缴费",
            payItem : "10月份住宿费"
          },
          {
            number : "编号3",
            name : "测试3",
            shouldPay : 100,
            payed : 0,
            status : "待缴费",
            payItem : "10月份住宿费"
          },
          {
            number : "编号4",
            name : "测试4",
            shouldPay : 100,
            payed : 0,
            status : "待缴费",
            payItem : "10月份住宿费"
          },
          {
            number : "编号5",
            name : "测试5",
            shouldPay : 100,
            payed : 0,
            status : "待缴费",
            payItem : "10月份住宿费"
          },
          {
            number : "编号6",
            name : "测试6",
            shouldPay : 100,
            payed : 0,
            status : "待缴费",
            payItem : "10月份住宿费"
          },
          {
            number : "编号7",
            name : "测试7",
            shouldPay : 100,
            payed : 0,
            status : "待缴费",
            payItem : "10月份住宿费"
          },
          {
            number : "编号8",
            name : "测试8",
            shouldPay : 100,
            payed : 0,
            status : "待缴费",
            payItem : "10月份住宿费"
          },
          {
            number : "编号9",
            name : "测试9",
            shouldPay : 100,
            payed : 0,
            status : "待缴费",
            payItem : "10月份住宿费"
          },
          {
            number : "编号10",
            name : "测试10",
            shouldPay : 100,
            payed : 0,
            status : "待缴费",
            payItem : "10月份住宿费"
          },
          {
            number : "编号11",
            name : "测试11",
            shouldPay : 100,
            payed : 0,
            status : "待缴费",
            payItem : "10月份住宿费"
          },
          {
            number : "编号12",
            name : "测试12",
            shouldPay : 100,
            payed : 0,
            status : "待缴费",
            payItem : "10月份住宿费"
          },
        ],
        multipleSelection: [],
        options: [
          {
            value: '选项1',
            label: '1'
          }
          ,
          {
            value: '选项2',
            label: '2'
          },
          {
            value: '选项3',
            label: '3'
          },
          {
            value: '选项4',
            label: '4'
          },
          {
            value: '选项5',
            label: '5'
          }],
        value: '',
        payTypeForm: {
          payType: '',
        },
        rules: {
          payType: [
            { required: true, message: '请选择支付方式', trigger: 'change' }
          ]
        }
      }
    },

    methods: {
      // 分页
      handleSizeChange: function (size) {
        this.pageSize = size;
      },
      handleCurrentChange: function(currentPage){
        this.currentPage = currentPage;
      },
      // 点击跳转详情页
      handleRowHandle:function (row,event,column) {
        if(column.type === 'selection'){
          return
        } else {
          this.$router.push(
            {
              path : '/charge_management/charge_info',
              query: {row:row}
            }
          );
          }
        }

    }
  }
</script>

<style>

  .charge_under_line .searchBox{
    height: 60px;
    line-height: 60px;
    text-align: left;
    padding-left: 30px;
    margin-bottom: 10px;
    background: #fff;
  }
  .charge_under_line .payTypeBox .el-form-item{
    margin: 0;
  }
  .charge_under_line .payTypeBox{
    height: 60px;
    padding-left: 30px;
    margin-bottom: 10px;
    background: #fff;
  }
  .charge_under_line .table_btn{
    height: 60px;
    margin-bottom: 10px;
    text-align: right;
    background: #fff;
    padding: 10px 20px 30px;
  }
  .charge_under_line .footerBox{
    width: 100%;
    height: 50px;
    text-align: right;
    background-color: #fff;
    padding-top: 9px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
</style>
